<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left">
				<view class="menu-icon" @click="toggleSidebar">
					<text class="icon">☰</text>
				</view>
				<view class="system-logo">
					<text class="logo-icon">📁</text>
				</view>
				<text class="system-title">档案管理系统</text>
			</view>
			
			<view class="header-center">
				<view class="nav-tabs">
					<view 
						v-for="(tab, index) in navTabs" 
						:key="index"
						class="nav-tab"
						:class="{ active: currentTab === index }"
						@click="switchTab(index)"
					>
						{{ tab }}
					</view>
				</view>
			</view>
			
			<view class="header-right">
				<view class="theme-toggle" @click="toggleTheme">
					<text class="icon">🌙</text>
				</view>
				<view class="notification" @click="showNotifications">
					<text class="icon">🔔</text>
					<view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
				</view>
				<view class="user-info" @click="showUserMenu">
					<view class="avatar">👤</view>
					<view class="user-details">
						<text class="username">张经理</text>
						<text class="user-role">机构管理员</text>
					</view>
					<text class="dropdown-icon">▼</text>
				</view>
			</view>
		</view>
		
		<!-- 主体内容区域 -->
		<view class="main-content">
			<!-- 左侧导航栏 -->
			<view class="sidebar" :class="{ collapsed: sidebarCollapsed }">
				<view class="sidebar-menu">
					<view 
						v-for="(item, index) in sidebarItems" 
						:key="index"
						class="menu-item"
						:class="{ active: currentMenu === index }"
						@click="selectMenu(index)"
					>
						<text class="menu-icon">{{ item.icon }}</text>
						<text class="menu-text">{{ item.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 中间内容区域 -->
			<view class="content-area">
				<!-- 我的待办区域 -->
				<view class="todo-section">
					<view class="section-header">
						<text class="section-title">我的待办</text>
						<text class="task-count">共{{ totalTasks }}项任务</text>
					</view>
					
					<!-- 任务分类标签 -->
					<view class="task-tabs">
						<view 
							v-for="(tab, index) in taskTabs" 
							:key="index"
							class="task-tab"
							:class="{ active: currentTaskTab === index }"
							@click="switchTaskTab(index)"
						>
							{{ tab }}
						</view>
					</view>
					
					<!-- 任务列表 -->
					<view class="task-list">
						<view 
							v-for="(task, index) in currentPageTasks" 
							:key="index"
							class="task-item"
						>
							<view class="task-icon">{{ task.icon }}</view>
							<view class="task-content">
								<view class="task-header">
									<text class="task-type">{{ task.type }}</text>
									<view class="priority-tag" :class="task.priority">
										{{ task.priority === 'urgent' ? '紧急' : '正常' }}
									</view>
								</view>
								<text class="task-title">{{ task.title }}</text>
								<text class="task-description">{{ task.description }}</text>
								<view class="task-time">
									<text class="time-item">⏰ 提交时间: {{ task.submitTime }}</text>
									<text class="time-item">📅 截止时间: {{ task.deadline }}</text>
								</view>
							</view>
							<button class="process-btn" @click="processTask(task)">处理</button>
						</view>
					</view>
					
					<!-- 分页控件 -->
					<view class="pagination">
						<button 
							class="page-btn" 
							:disabled="currentPage === 1"
							@click="prevPage"
						>
							&lt;
						</button>
						<view class="page-numbers">
							<button 
								v-for="page in totalPages" 
								:key="page"
								class="page-number"
								:class="{ active: currentPage === page }"
								@click="goToPage(page)"
							>
								{{ page }}
							</button>
						</view>
						<button 
							class="page-btn" 
							:disabled="currentPage === totalPages"
							@click="nextPage"
						>
							&gt;
						</button>
					</view>
				</view>
			</view>
			
			<!-- 右侧常用功能区域 -->
			<view class="sidebar-right">
				<view class="common-functions">
					<view class="section-header">
						<text class="section-title">常用功能</text>
						<text class="edit-shortcuts" @click="editShortcuts">编辑快捷方式 ✏️</text>
					</view>
					
					<view class="function-buttons">
						<view 
							v-for="(func, index) in commonFunctions" 
							:key="index"
							class="function-btn"
							@click="executeFunction(func)"
						>
							<text class="function-icon">{{ func.icon }}</text>
							<text class="function-text">{{ func.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 浮动按钮 -->
		<view class="floating-buttons">
			<view class="floating-btn primary">📄</view>
			<view class="floating-btn warning">⚠️</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 顶部导航标签
			navTabs: ['组织管理', '档案管理', '评级管理', '业务管理', '统计报表', '系统设置'],
			currentTab: 0,
			
			// 侧边栏菜单
			sidebarItems: [
				{ name: '机构管理', icon: '🏢' },
				{ name: '部门管理', icon: '👥' },
				{ name: '用户管理', icon: '👤' },
				{ name: '角色管理', icon: '⚙️' }
			],
			currentMenu: 0,
			sidebarCollapsed: false,
			
			// 任务分类标签
			taskTabs: ['全部任务', '归档任务', '借阅任务', '审批任务', '审核任务'],
			currentTaskTab: 0,
			
			// 任务数据
			tasks: [
				{
					id: 1,
					type: '待归档材料',
					title: '项目A可行性报告',
					description: '该材料需要尽快归档，包含项目A的重要决策信息',
					submitTime: '2025-10-10 09:30',
					deadline: '2025-10-15 18:00',
					priority: 'urgent',
					icon: '📄',
					category: 'archive'
				},
				{
					id: 2,
					type: '借阅审批',
					title: '李明-借阅项目B合同',
					description: '李明申请借阅项目B的合同文件，用于客户沟通',
					submitTime: '2025-10-10 14:20',
					deadline: '2025-10-12 17:00',
					priority: 'normal',
					icon: '📋',
					category: 'borrow'
				},
				{
					id: 3,
					type: '评级项目审批',
					title: '王五-提交年度评级计划',
					description: '王五提交了年度评级计划，需要审核批准',
					submitTime: '2025-10-09 16:45',
					deadline: '2025-10-14 12:00',
					priority: 'normal',
					icon: '⭐',
					category: 'approval'
				},
				{
					id: 4,
					type: '档案审核',
					title: '新入库档案质量审核',
					description: '近期入库的一批档案需要进行质量审核',
					submitTime: '2025-10-08 13:15',
					deadline: '2025-10-14 18:00',
					priority: 'urgent',
					icon: '🔍',
					category: 'review'
				},
				{
					id: 5,
					type: '借阅审批',
					title: '张三-借阅历史档案',
					description: '张三申请借阅2019年历史档案，用于研究分析',
					submitTime: '2025-10-11 10:30',
					deadline: '2025-10-16 17:00',
					priority: 'normal',
					icon: '📚',
					category: 'borrow'
				},
				{
					id: 6,
					type: '归档任务',
					title: '季度报告归档',
					description: '第三季度各部门报告需要整理归档',
					submitTime: '2025-10-11 15:20',
					deadline: '2025-10-18 16:00',
					priority: 'normal',
					icon: '📊',
					category: 'archive'
				}
			],
			
			// 分页相关
			currentPage: 1,
			pageSize: 5,
			
			// 常用功能
			commonFunctions: [
				{ name: '新建材料', icon: '📝' },
				{ name: '发起借阅', icon: '📖' },
				{ name: '数据统计', icon: '📈' }
			],
			
			// 通知数量
			unreadCount: 2
		}
	},
	computed: {
		// 过滤后的任务
		filteredTasks() {
			if (this.currentTaskTab === 0) {
				return this.tasks;
			}
			const categoryMap = ['', 'archive', 'borrow', 'approval', 'review'];
			const category = categoryMap[this.currentTaskTab];
			return this.tasks.filter(task => task.category === category);
		},
		
		// 总任务数
		totalTasks() {
			return this.filteredTasks.length;
		},
		
		// 总页数
		totalPages() {
			return Math.ceil(this.totalTasks / this.pageSize);
		},
		
		// 当前页任务
		currentPageTasks() {
			const start = (this.currentPage - 1) * this.pageSize;
			const end = start + this.pageSize;
			return this.filteredTasks.slice(start, end);
		}
	},
	methods: {
		// 切换侧边栏
		toggleSidebar() {
			this.sidebarCollapsed = !this.sidebarCollapsed;
		},
		
		// 切换主题
		toggleTheme() {
			alert('主题切换功能');
		},
		
		// 显示通知
		showNotifications() {
			alert(`您有${this.unreadCount}条未读通知`);
		},
		
		// 显示用户菜单
		showUserMenu() {
			const choice = confirm('是否退出登录？');
			if (choice) {
				localStorage.removeItem('isLoggedIn');
				localStorage.removeItem('currentUser');
				this.$router.push('/login');
			}
		},
		
		// 切换导航标签
		switchTab(index) {
			this.currentTab = index;
		},
		
		// 选择菜单项
		selectMenu(index) {
			this.currentMenu = index;
		},
		
		// 切换任务分类
		switchTaskTab(index) {
			this.currentTaskTab = index;
			this.currentPage = 1; // 重置到第一页
		},
		
		// 处理任务
		processTask(task) {
			const choice = confirm(`确定要处理任务"${task.title}"吗？`);
			if (choice) {
				alert('任务处理成功');
			}
		},
		
		// 上一页
		prevPage() {
			if (this.currentPage > 1) {
				this.currentPage--;
			}
		},
		
		// 下一页
		nextPage() {
			if (this.currentPage < this.totalPages) {
				this.currentPage++;
			}
		},
		
		// 跳转到指定页
		goToPage(page) {
			this.currentPage = page;
		},
		
		// 执行常用功能
		executeFunction(func) {
			let route = '';
			switch(func.name) {
				case '新建材料':
					route = '/new-material';
					break;
				case '发起借阅':
					route = '/borrow-request';
					break;
				case '数据统计':
					route = '/data-statistics';
					break;
				default:
					alert(`功能"${func.name}"正在开发中`);
					return;
			}
			
			this.$router.push(route);
		},
		
		// 编辑快捷方式
		editShortcuts() {
			alert('编辑快捷方式功能');
		}
	}
}
</script>

<style scoped>
.container {
	width: 100%;
	height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.header {
	height: 60px;
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	margin-right: 15px;
	cursor: pointer;
	font-size: 18px;
}

.system-logo {
	width: 32px;
	height: 32px;
	background: #007AFF;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.logo-icon {
	color: white;
	font-size: 16px;
}

.system-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.header-center {
	flex: 1;
	display: flex;
	justify-content: center;
}

.nav-tabs {
	display: flex;
	gap: 20px;
}

.nav-tab {
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	color: #666;
	transition: all 0.3s;
}

.nav-tab.active {
	background: #007AFF;
	color: white;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.theme-toggle, .notification {
	cursor: pointer;
	font-size: 18px;
	position: relative;
}

.notification {
	position: relative;
}

.badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background: #ff3b30;
	color: white;
	border-radius: 10px;
	width: 18px;
	height: 18px;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.avatar {
	width: 32px;
	height: 32px;
	background: #007AFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 16px;
}

.user-details {
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 14px;
	font-weight: bold;
	color: #333;
}

.user-role {
	font-size: 12px;
	color: #999;
}

.dropdown-icon {
	font-size: 12px;
	color: #999;
}

/* 主体内容区域 */
.main-content {
	flex: 1;
	display: flex;
	overflow: hidden;
}

/* 左侧导航栏 */
.sidebar {
	width: 200px;
	background: #fff;
	border-right: 1px solid #e0e0e0;
	transition: width 0.3s;
}

.sidebar.collapsed {
	width: 60px;
}

.sidebar-menu {
	padding: 20px 0;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	cursor: pointer;
	transition: all 0.3s;
}

.menu-item:hover {
	background: #f0f0f0;
}

.menu-item.active {
	background: #e3f2fd;
	border-right: 3px solid #007AFF;
}

.menu-icon {
	margin-right: 12px;
	font-size: 16px;
}

.menu-text {
	font-size: 14px;
	color: #333;
}

/* 中间内容区域 */
.content-area {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
}

.todo-section {
	background: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.task-count {
	font-size: 14px;
	color: #666;
}

.task-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.task-tab {
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	color: #666;
	background: #f5f5f5;
	transition: all 0.3s;
}

.task-tab.active {
	background: #007AFF;
	color: white;
}

.task-list {
	margin-bottom: 20px;
}

.task-item {
	display: flex;
	align-items: center;
	padding: 16px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 12px;
	background: #fff;
	transition: all 0.3s;
}

.task-item:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.task-icon {
	font-size: 20px;
	margin-right: 12px;
}

.task-content {
	flex: 1;
}

.task-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.task-type {
	font-size: 14px;
	color: #007AFF;
	font-weight: 500;
}

.priority-tag {
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 12px;
	color: white;
}

.priority-tag.urgent {
	background: #ff3b30;
}

.priority-tag.normal {
	background: #34c759;
}

.task-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 6px;
	display: block;
}

.task-description {
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
	display: block;
}

.task-time {
	display: flex;
	gap: 20px;
}

.time-item {
	font-size: 12px;
	color: #999;
}

.process-btn {
	background: #007AFF;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.3s;
}

.process-btn:active {
	background: #0056CC;
}

/* 分页控件 */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.page-numbers {
	display: flex;
	gap: 5px;
}

.page-btn, .page-number {
	width: 32px;
	height: 32px;
	border: 1px solid #e0e0e0;
	background: #fff;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
}

.page-btn:disabled {
	background: #f5f5f5;
	color: #ccc;
	cursor: not-allowed;
}

.page-number.active {
	background: #007AFF;
	color: white;
	border-color: #007AFF;
}

/* 右侧常用功能区域 */
.sidebar-right {
	width: 200px;
	background: #fff;
	border-left: 1px solid #e0e0e0;
	padding: 20px;
}

.common-functions {
	height: 100%;
}

.edit-shortcuts {
	font-size: 12px;
	color: #007AFF;
	cursor: pointer;
}

.function-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.function-btn {
	width: 100%;
	height: 80px;
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
}

.function-btn:hover {
	background: #e3f2fd;
	border-color: #007AFF;
}

.function-icon {
	font-size: 24px;
	margin-bottom: 8px;
}

.function-text {
	font-size: 14px;
	color: #333;
}

/* 浮动按钮 */
.floating-buttons {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.floating-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.floating-btn.primary {
	background: #007AFF;
	color: white;
}

.floating-btn.warning {
	background: #ff3b30;
	color: white;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
	.sidebar, .sidebar-right {
		display: none;
	}
	
	.header-center {
		display: none;
	}
	
	.nav-tabs {
		display: none;
	}
}
</style>